<template>
	<view>
		<view class="bti"></view>
		<view class="conter">
			<view class="content">
				<view class="went cu-tag bg-white" name="" id="">+86</view>
				<!-- 	<view class='cu-tag bg-blue '>+86</view> -->
				<input class="input" type="text" v-model="phone" placeholder="请输入手机号" />
				<button class="btn" @tap="phone=''"></button>
			</view>
			<view class="content">
				<view class="went">验证码</view>
				<input class="input" type="text" placeholder="请输入验证码" v-model="code" />
				<button class="btn tem" @tap="getYan" v-if="isyan">获取验证码</button>
				<button class="btn tem" v-else style="color: #666666;">{{s}}秒后重试</button>
			</view>
			<view class="content">
				<view class="went">密码</view>
				<input class="input" type="" placeholder="密码长度6~20位" v-model="userpass"  password/>
				<button class="btn" @tap="userpass=''"></button>
			</view>
			
		</view>
		<view class="foot">
			<button class="swper1 bg-blue" @click="to" :class="[(phone&&userpass&&code)?'':'light']">注册</button>
			<view class="swper2">
				<view class="text1">点击注册，即表示同意</view>
				<view class="text2">用户注册协议，雨点金融隐私政策</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	const {
		mapState,
		mapMutations,
		mapActions
	} = createNamespacedHelpers("users");
	export default {
		data() {
			return {

				phone: "",
				code: "",
				userpass: ""
			}
		},
		onLoad() {

		},
		computed: {
			...mapState(['s', 'isyan'])
		},

		methods: {
			...mapMutations(["s_jj", 'cnm']),
			// 发送注册
			async to() {
				const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/
				if (!this.code) {
					uni.showToast({
						title: "请输入验证码",
						duration: 2000,
						icon: "none"
					})
				} else if (!this.phone) {
					uni.showToast({
						title: "请输入手机号",
						duration: 2000,
						icon: "none"
					})
				} else if (!this.userpass) {
					uni.showToast({
						title: "请输入密码",
						duration: 2000,
						icon: "none"
					})

				} else {

					if (!!reg.test(this.userpass)) {
						console.log(3333, this.userpass)
						const data = await this.setregister({
							verify: this.code,
							phonenumber: this.phone,
							password: this.userpass
						})
						if (data.code == 200) {
							uni.navigateTo({
								url: "../login/login"
							})
							
							uni.showToast({
								title: "注册成功",
								duration: 2000,
								
							})
						}else if(data.data=="验证码不正确"){
							uni.showToast({
								title: "验证码不正确或已过期",
								duration: 2000,
								icon:"none"
							})
						}else{
							uni.showToast({
								title: "改电话已经被注册",
								duration: 2000,
								icon:"none"
							})
						}

					} else {

		
						uni.showToast({
							title: "至少包含 数字和英文大小写，长度8-16",
							duration: 2000,
							icon: "none"
						})
					}

				}

			},
			getYan() {


				// 發送驗證碼
				const phoneyan = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/
				if (phoneyan.test(this.phone - 0)) {
					this.cnm()
					this.s_jj()
					console.log(8888)
					this.getVerify(this.phone)

				} else {
					uni.showToast({
						title: "请输入正确号码",
						duration: 2000,
						icon: "none"
					})
				}




			},
			...mapActions(["getVerify", "setregister"]),
		}
	}
</script>

<style scoped lang="scss">
	button::after {
		border: none
	}

	.bti {
		width: 750rpx;
		height: 80rpx;
		color: #323232;
		font-size: 40rpx;
		margin-bottom: 110rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.conter {
		width: 750rpx;
		margin-bottom: 110rpx;

		// border: 1px solid red;
		.content {
			width: 750rpx;
			height: 100rpx;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			text-align: 100rpx;

			.went {
				width: 150rpx;
				text-align: right;
				height: 60rpx;
				font-size: 32rpx;
				padding-right: 24rpx;
				line-height: 60rpx;
			}

			;

			.input {
				width: 400rpx;
				height: 60rpx;
				font-size: 28rpx;
				color: #7a7979;
			}

			;

			.btn {
				width: 200rpx;
				height: 40rpx;
				margin: 0 auto;
				padding: 0 0 0 20rpx;
				border-radius: 20rpx;
				background: none;
				background-image: url(../../static/images/icon_zhuce_chacha@2x.png);
				background-size: 40rpx 40rpx;
				background-repeat: no-repeat;
				background-position: 140rpx 0;
			}

			;

			.tem {
				width: 200rpx;
				height: 60rpx;
				padding: 0;
				border: none;
				margin: 0;
				font-size: 32rpx;
				color: #3297e5;
				line-height: 60rpx;
				background: none;
			}
		}
	}


	.foot {
		width: 750rpx;

		.swper1 {
			width: 700rpx;
			height: 100rpx;
			margin: 0 auto;
			margin-bottom: 52rpx;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			border-radius: 50rpx;
			line-height: 100rpx;
			// background-color: #1778E6;
		}

		;

		.swper2 {
			width: 620rpx;
			height: 30rpx;
			margin: 0 auto;
			font-size: 24rpx;
			display: flex;

			.text1 {
				color: #7a7979;
			}

			;

			.text2 {
				color: #323232;
			}
		}
	}
</style>
